<template>
  <div class="number-box flowInput flowInputComponent" style="padding: 0;">
    <div class="number bzNumber">
      <!--<div class="number-item1">上行</div>-->
      <!--<div class="number-item1">下行</div>-->
      <div class="pull-left p-rl">
        <span class="arrow-top arrow">↑</span>
        <span class="unit">
          <el-select class="input" style="padding: 0;border: none;width: 50px;" v-model="upRule"
                                      placeholder="请选择">
                  <el-option label="KB" value="KB"></el-option>
                  <el-option label="MB" value="MB"></el-option>
                  <el-option label="GB" value="GB"></el-option>
                </el-select>
        </span>
        <!--<el-input-number class="number-item2" controls-position="right" v-model="flowUp" @change="handleChange('flowUp')"-->
                         <!--:min="1"></el-input-number> -->
        <el-input-number class="number-item2" :step="10" v-model="flowUp" @change="handleChange('flowUp')"
                         :min="0"></el-input-number>
        <!--<el-input-number size="mini" v-model="num7"></el-input-number>-->
      </div>
      <div class="pull-left p-rl" style="margin-left: 4%">
        <span class="arrow-top arrow" style="color: #f00;">↓</span>
       <span class="unit">
          <el-select class="input" style="padding: 0;border: none;width: 50px;" v-model="downRule"
                     placeholder="请选择">
                  <el-option label="KB" value="KB"></el-option>
                  <el-option label="MB" value="MB"></el-option>
                  <el-option label="GB" value="GB"></el-option>
                </el-select>
        </span>
        <el-input-number class="number-item2" :step="10" v-model="flowDown" @change="handleChange('flowDown')"
                         :min="0"></el-input-number>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      initUp:{
        default:"",
      },
      initDown:{
        default:"",
      },
      initIndex:{
        default:""
      }
    },
    data(){
      return{
        flowUp:0,
        flowDown:0,
        upRule:'KB',
        downRule:'KB',
      }
    },
    watch:{
      initUp(newVal,oldVal){
        if(this.initUp!=""){
          this.initUp=parseInt(this.initUp);
          if(this.initUp==0){
            this.flowUp=this.initUp/1024;
            // this.upRule="KB";
          }else{
            if(this.initUp%(1024*1024*1024)==0){
              this.flowUp=this.initUp/(1024*1024*1024);
              this.upRule="GB";
            }else if(this.initUp%(1024*1024)==0){
              this.flowUp=this.initUp/(1024*1024);
              this.upRule="MB";
            }else if(this.initUp%1024==0){
              this.flowUp=this.initUp/1024;
              this.upRule="KB";
            }
          }
        }
        this.$emit('getFlowUp',this.flowUp+this.upRule);
      },
      initDown(newVal,oldVal){
        if(this.initDown!=""){
          this.initDown=parseInt(this.initDown);
          if(this.initDown==0){
            this.flowDown=this.initDown/1024;
            // this.downRule="KB";
          }else{
            if(this.initDown%(1024*1024*1024)==0){
              this.flowDown=this.initDown/(1024*1024*1024);
              this.downRule="GB";
            }else if(this.initDown%(1024*1024)==0){
              this.flowDown=this.initDown/(1024*1024);
              this.downRule="MB";
            }else if(this.initDown%1024==0){
              this.flowDown=this.initDown/1024;
              this.downRule="KB";
            }
          }
        }
        this.$emit('getFlowDown',this.flowDown+this.downRule);
      },
      flowUp(newVal,oldVal){
        if(newVal==undefined){
          if(this.initIndex!==""){
            this.$emit('getFlowUp',''+this.upRule+"&index="+this.initIndex);
          }else{
            this.$emit('getFlowUp',''+this.upRule);
          }
        }else{
          if(this.initIndex!==""){
            this.$emit('getFlowUp',newVal+this.upRule+"&index="+this.initIndex);
          }else{
            this.$emit('getFlowUp',newVal+this.upRule);
          }
        }
      },
      flowDown(newVal,oldVal){
        if(newVal==undefined){
          if(this.initIndex!==""){
            this.$emit('getFlowDown',''+this.downRule+"&index="+this.initIndex);
          }else{
            this.$emit('getFlowDown',''+this.downRule);
          }
        }else{
          if(this.initIndex!==""){
            this.$emit('getFlowDown',newVal+this.downRule+"&index="+this.initIndex);
          }else{
            this.$emit('getFlowDown',newVal+this.downRule);
          }
        }
      },
      upRule(newVal,oldVal){
        if(this.initIndex!==""){
          this.$emit('getFlowUp',this.flowUp+newVal+"&index="+this.initIndex);
        }else{
          this.$emit('getFlowUp',this.flowUp+newVal);
        }
      },
      downRule(newVal,oldVal){
        if(this.initIndex!==""){
          this.$emit('getFlowDown',this.flowDown+newVal+"&index="+this.initIndex);
        }else{
          this.$emit('getFlowDown',this.flowDown+newVal);
        }
      },
    },
    mounted(){
      this.$nextTick(()=>{
        if(this.initUp!=""){
          this.initUp=parseInt(this.initUp);
          if(this.initUp==0){
            this.flowUp=this.initUp/1024;
            this.upRule="KB";
          }else{
            if(this.initUp%(1024*1024*1024)==0){
              this.flowUp=this.initUp/(1024*1024*1024);
              this.upRule="GB";
            }else if(this.initUp%(1024*1024)==0){
              this.flowUp=this.initUp/(1024*1024);
              this.upRule="MB";
            }else if(this.initUp%1024==0){
              this.flowUp=this.initUp/1024;
              this.upRule="KB";
            }
          }
        }

        if(this.initDown!=""){
          this.initDown=parseInt(this.initDown);
          if(this.initDown==0){
            this.flowDown=this.initDown/1024;
            this.downRule="KB";
          }else{
            if(this.initDown%(1024*1024*1024)==0){
              this.flowDown=this.initDown/(1024*1024*1024);
              this.downRule="GB";
            }else if(this.initDown%(1024*1024)==0){
              this.flowDown=this.initDown/(1024*1024);
              this.downRule="MB";
            }else if(this.initDown%1024==0){
              this.flowDown=this.initDown/1024;
              this.downRule="KB";
            }
          }
        }

        this.$emit('getFlowUp',this.flowUp+this.upRule);
        this.$emit('getFlowDown',this.flowDown+this.downRule);
      })
    },
    methods:{
      handleChange(text){
        // this[text]=this[text].replace(/[^\d]/ig,'');
      },
      checkKey(e){

      },
    }
  }
</script>

<style scoped lang="less" type="text/less">
  .number-box {
    display: flex;
    align-items: center;
    height: auto;
    border: 0;
    label {
      width: 60px;
      text-align: right;
      margin-right: 15px;
      color: #333;
      font-weight: 600;
    }
    .p-rl {
      width: 48%;
      position: relative;
      .arrow{
        position: absolute;
        z-index: 55;
        right: 80px;
        top: 4px;
        font-size: 20px;
        color: #409EFF;
      }
    }
    .number {
      flex: 1;
      .number-item1 {
        float: left;
        width: 50%;
        background: #409eff;
        color: #fff;
        text-align: center;
        padding: 5px;
      }
      .number-item2 {
        float: left;
        width: 100%;
      }
    }
  }

  .unit {
    position: absolute;
    right: 22px;
    z-index: 555;
    font-size: 13px;
    top: 5px;
    height: 28px;
    border-left: 1px solid #dcdfe6;
    overflow: hidden;
  }
</style>
